var BasePrefab = require("BasePrefab");
var GuideRbiButton = require("GuideRbiButton");

// 标签类型
let typeEnmu = cc.Enum({
    "type1": 0,
    "type2": 1,
});
cc.Class({
    extends: BasePrefab,

    properties: {
        style: {
            default: 0,
            type: typeEnmu,
        },
        tabNode: cc.Node,
        viewNode: cc.Node,
        normalButtonSprite: cc.SpriteFrame,
        currentButtonSprite: cc.SpriteFrame,
    },
    // 切换页
    switchTab: function (idx) {
        // cc.log("switchTab", idx);
        if (idx === this.tabIdx) {
            return;
        }
        if (!this.bindRole[idx].viewIns) { // 如果没有实例，就创建
            this.loadingViewIdx = idx;
            var retStat = this.bindRole[idx].view((view) => {
                view.parent = this.viewNode;
                this.bindRole[idx].viewIns = view;
                if (this.loadingViewIdx !== idx) {
                    view.active = false;
                }

                // 输出切换到的view的名字
                cc.log("Tab切换到 : " + idx + " - " + (this.bindRole[idx].viewIns._name || "未知"))

            });
            if (retStat === false) {
                return;
            }
        } else {
            // 如果已经有了实例，就显示出来
            this.bindRole[idx].viewIns.active = true;

            // 输出切换到的view的名字
            cc.log("Tab切换到 : " + idx + " - " + (this.bindRole[idx].viewIns._name || "未知"))
        }

        // 隐藏前一个view
        if (this.tabIdx !== undefined) {
            if (this.bindRole[this.tabIdx].viewIns) {
                this.bindRole[this.tabIdx].viewIns.active = false;
            }
            this.bindRole[this.tabIdx].buttonIns.getComponent(cc.Button).interactable = true;
            if (this.style === typeEnmu.type2) {
                this.bindRole[this.tabIdx].buttonIns.labelPic1.active = true;
                this.bindRole[this.tabIdx].buttonIns.labelPic2.active = false;
            }
        }
        this.bindRole[idx].buttonIns.getComponent(cc.Button).interactable = false;
        if (this.style === typeEnmu.type2) {
            this.bindRole[idx].buttonIns.labelPic1.active = false;
            this.bindRole[idx].buttonIns.labelPic2.active = true;
        }
        this.tabIdx = idx;
        // 切换页签回调
        if (this.switchCb) {
            this.switchCb();
        }
    },
    // 获取当前是第几个页
    getCurIndex: function () {
        return this.tabIdx;
    },
    /*
        绑定按钮和页
        @idx 下标
        @button 一般传文字就行，如果需要特殊效果，也可以传一个node
        @view 可以返回一个node的回调函数
    */
    bindTab: function (idx, button, view, redKey, RbiKey) {
        var btn = new cc.Node();
        btn.parent = this.tabNode;

        // 图片
        btn.addComponent(cc.Sprite);
        var sprComponent = btn.getComponent(cc.Sprite);
        sprComponent.spriteFrame = this.normalButtonSprite;
        btn.x = (idx + 0.5) * (btn.width - 8) - this.tabNode.width / 2 + 20;
        btn.y = - this.tabNode.height / 2 + btn.height / 2 - 7;

        // 按钮
        btn.addComponent(cc.Button);
        var btnComponent = btn.getComponent(cc.Button);
        btnComponent.transition = cc.Button.Transition.SPRITE;
        btnComponent.normalSprite = this.normalButtonSprite;
        btnComponent.pressedSprite = this.normalButtonSprite;
        btnComponent.hoverSprite = this.currentButtonSprite;
        btnComponent.disabledSprite = this.currentButtonSprite;
        var eventHandler = new cc.Component.EventHandler();
        eventHandler.target = this.node;
        eventHandler.component = "NiceTabView";
        eventHandler.handler = "btnClick";
        eventHandler.customEventData = idx;
        btnComponent.clickEvents[0] = eventHandler;
        if (this.style === typeEnmu.type1) {
            // 文字
            var labelNode = new cc.Node;
            labelNode.y = 5;
            labelNode.parent = btn;
            var labelComponent = labelNode.addComponent(cc.Label);
            labelComponent.string = button;
            labelComponent.font = vv.GlobalRes.fonttf
        } else if (this.style === typeEnmu.type2) {
            for (var i = 1; i <= 2; i++) {
                // 图片
                let picNode = new cc.Node();
                // picNode.y = 5;
                picNode.parent = btn;
                picNode.active = i === 1;
                this.loadRes(button + i, cc.SpriteFrame, (err, pic) => {
                    if (!err) {
                        picNode.addComponent(cc.Sprite).spriteFrame = pic;
                    } else {
                        cc.log("加载图片失败", err);
                    }
                });
                btn["labelPic" + i] = picNode;
            }
        }

        if (this.bindRole === undefined) {
            this.bindRole = [];
        }
        this.bindRole[idx] = { button: button, view: view, buttonIns: btn };
        if (redKey) {
            vv.Helper.createPrefab("customControl/RedPoint/RedPoint", {}, null, (node) => {
                if (!cc.isValid(this)) {
                    return;
                }

                node.getComponent("RedPoint").init({
                    key: redKey
                })
                node.position = cc.v2(btn.width / 2 - 18, btn.height / 2 - 8);
                node.parent = btn;
            });
        }

        if (RbiKey) {
            btn.addComponent(GuideRbiButton).recordClicKey = RbiKey
        }
    },
    btnClick: function (target, data) {
        this.switchTab(data);
    },
    // 设置切换标签页的回调
    setSwitchCb: function (cb) {
        this.switchCb = cb;
    },
    // 清除
    clear: function () {
        if (this.bindRole) {
            for (var i = 0; i < this.bindRole.length; i++) {
                var role = this.bindRole[i];
                if (role.viewIns) {
                    role.viewIns.destroy();
                }
                if (role.buttonIns) {
                    role.buttonIns.destroy();
                }
            }
            this.bindRole = [];
            delete this.tabIdx;
        }
    },
});
